<!--
-->
<template>
    <vxe-modal v-model="visible" :position="{top: '60px'}" :title="title" destroy-on-close  :min-width="layout.modalMinWidth(600)" resize show-footer show-maximize :width="layout.modalWidth(600)" :height="layout.modalHeight(600)" @close="cancelClick">
        <div v-if="!!state.loadingMessage" class="progress-loading">
            <div v-loading="!!state.loadingMessage" class="loading"></div>
            <span>{{state.loadingMessage}}</span>
        </div>
        <el-form ref="ELForm" v-loading="isLoading" :model="state.model" :rules="rules" :validate-on-rule-change="false" class="ELForm" inline label-width="120px">
            <el-form-item :style="layout.col1" label="文件" prop="file">
                <div style="width: 100%"><ChooseFile :info="state.model" :name="state.model.fileName" @change="onFileChange" /></div>
                <el-text type="warning"></el-text>
            </el-form-item>
            <el-form-item :style="layout.col1" label="UI文件名称" prop="fileName">
                <el-input v-model="state.model.fileName"/>
            </el-form-item>
            <el-form-item :style="layout.col1" label="UI版本号V" prop="versionNum">
                <el-input v-model="state.model.versionNum" placeholder="例 2410181 表示 24年10月18日第1次"/>
            </el-form-item>
            <el-form-item :style="layout.col1" label="开始版本V" prop="startVersion">
                <el-select v-model="state.model.startVersion" placeholder="0.0.0"  style="width: 100%" disabled filterable clearable>
                    <el-option v-for="item in state.versionList" :key="item.id" :value="item.versionNum" :label="item.versionNum"/>
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col1" label="结束版本V" prop="endVersion">
                <el-select v-model="state.model.endVersion" placeholder="0.0.0"  style="width: 100%" filterable clearable>
                    <el-option v-for="item in state.versionList" :key="item.id" :value="item.versionNum" :label="item.versionNum"/>
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col1" label="描述" prop="description">
                <el-input type="textarea" v-model="state.model.childrenVersion" placeholder="描述" :rows="4"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "./api.js";
import ChooseFile from "./ChooseFile.vue";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const Model = () => {
    return {
        id: null,
        name: null,
        framework: 0,
        localPath: null,
    }
}

// 校验规则
const rules = computed(() => {
    return {
        programId: [{required: true, message: "请设置所属程序"}],
        fileName: [{required: true, message: "请设置UI文件名称"}],
        versionNum: [{required: true, message: "请设置开始版本号"}],
        childrenVersion: [{required: true, message: "请设置UI版本号"}],
    }
})

// 自定义校验规则
const customRules = {
    // pid: (rule, value, callback) => {
    //     if (state.model.type > 0) {
    //         if (!value) return callback(new Error("请选择上级菜单"));
    //     }
    //     return true;
    // },
};

// 添加了文件
function onFileChange(file) {
    if (file) {
        state.model.file = file;
        state.model.fileName = file.name.replace(/.zip/, "");
        state.model.versionNum = file.name.replace(/UI/g, "").split(".")[0];
    }
}

async function loadVersionList() {
    const {data} = await api.GetVersionList({programId: state.model.programId});
    state.versionList = data || []
}

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据
    loadVersionList()
}

// 校验表单
function beforeSubmit() {
    if (!state.model.id && !state.model.file) return $message.warning("请选择文件")
    ELForm.value.validate(isOk => {
        isOk && submit()
    })
}

// 提交表单
async function submit() {
    isSubmitting.value = true
    console.log("submit: ", state.model)
    const params = {...state.model}
    params.file = undefined;
    params.framework = undefined;
    const action = state.model.id ? "UpdateProgramUI" : "AddProgramUI"
    const body = new FormData()
    body.append("fileInfo", state.model.file)
    state.loadingMessage = "上传中..."
    const {success, data} = await api[action](params, body, ({progress}) => {
        console.log(progress)
        if (progress > 0.99) {
            state.loadingMessage = `保存中...`
        } else {
            progress = (progress * 100).toFixed(2) + "%"
            state.loadingMessage = `上传中...${progress}`
        }
    });
    isLoading.value = false
    isSubmitting.value = false
    if (!success) {
        state.loadingMessage = `上传失败!`
        setTimeout(() => {
            state.loadingMessage = null
        }, 1000)
        return 0
    };
    state.loadingMessage = null
    $message.success("操作成功")
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.EditForm {

}
.progress-loading {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    color: var(--el-color-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    .loading {
        width: 100px;
        height: 100px;
        background-color: rgba(0, 0, 0, 0);
    }
}
</style>
